<template>
  <div id="app" style="width:100%;">

      <transition :name="transitionName" mode=""><!--     组件页面最外层容器不能使用定位布局     -->
              <router-view  class="transitionBody" ></router-view>
      </transition>
      <mu-slide-bottom-transition>
      <div class="btnbox"  v-show="$store.state.btnshow">
          <mu-container>
              <mu-bottom-nav :value.sync="$store.state.btnnum" @change="btncc">
                  <mu-bottom-nav-item :value="0" title="文章" icon="devices"></mu-bottom-nav-item>
<!--                  <mu-bottom-nav-item :value="1" title="调试" icon="storefront"></mu-bottom-nav-item>-->
                  <mu-bottom-nav-item :value="1" title="用户" icon="person"></mu-bottom-nav-item>
              </mu-bottom-nav>
          </mu-container>
      </div>
      </mu-slide-bottom-transition>
  </div>
</template>
<script>
export default {
  components: {},//声明子组件
    data(){
      return{
          transitionName:"",
          btndata:[
              {text:'文章',url1:'./img/btnbox/shebei1.png',url2:'./img/btnbox/shebei2.png',path:'/sb'},
              // {text:'市场',url1:'./img/btnbox/sc1.png',url2:'./img/btnbox/sc2.png',path:'/sc'},
              {text:'用户',url1:'./img/btnbox/wode1.png',url2:'./img/btnbox/wode2.png',path:'/yh'},
          ],

      }
    },

  methods:{
      btncc(value){
          this.$store.state.btnnum = value;
          this.$router.push({path:this.btndata[value].path});
      },

  },
    watch:{
        $route(to,from){
           // this.$store.state.to_index = to.meta.index;
           // this.$store.state.from_index = from.meta.index;

            //实现路由跳转动画
            if (to.meta.index > from.meta.index)
                this.transitionName = "slide-left";
            if (to.meta.index < from.meta.index)
                this.transitionName = "slide-right";
        }
    },
  mounted(){

  }
}
</script>
<style lang="scss" scoped>
  @import "./assets/css/hua.css";
  #app{
    padding-bottom: 1.31rem;
  }
  .btn{
    margin: 0.23rem  /* 5/75 */ 0 0 0.43rem  /* 10/75 */;
  }
  .btnbox{
    width: 100%;
    height: 1.31rem;
    background: #FFFFFF;
    box-shadow: 0rem  /* 0/75 */ -0.053rem  /* -4/75 */ 0.107rem  /* 8/75 */ 0rem  /* 0/75 */ rgba(22, 23, 23, 0.1);
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
  }
</style>
